<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="include.jsp"%>
<!DOCTYPE html>
<html lang="en">
<head>
<%@ include file="head.jsp"%>
<title>Product</title>
</head>

<body>
	<div class="container">
		<%@ include file="header.jsp"%>
		<div class="row">
			<%@ include file="navigation.jsp"%>
			<div class="span9">
				<ul class="breadcrumb">
					<li><a href="#">Home</a> <span class="divider">/</span></li>
					<li><a href="#">Audio</a> <span class="divider">/</span></li>
					<li class="active"><a href="#">MP3 players</a></li>
				</ul>


				<div class="row">
					<div class="span9">
						<h1>${product.name}</h1>
					</div>
				</div>
				<hr>

				<div class="row">
					<div class="span3">
						<img alt=""
							src="${pageContext.request.contextPath}/<spring:url value="${product.imagepath}"/>" />
					</div>
					<div class="span6">

						<div class="span6">
							<address>
								<strong>Category:</strong><span>&nbsp${product.category.name}</span><br />
								<strong>Manufacturer:</strong><span>&nbsp${product.manufacturer.name}</span><br />
							</address>
						</div>

						<div class="span6">
							<h2>
								<strong>Price: &#36;${product.price}</strong><br /> <br />
							</h2>
						</div>

						<div class="span6">

							<div class="span3 no_margin_left">
								<form:form method="POST"
									action="${pageContext.request.contextPath}/shopping/cart-add">
									<input type="hidden" name="id" id="id" value="${product.id}" />
									<label>Quantity:</label>
									<input type="text" name="quality" id="quality" class="span1"
										value="1" />
									<input class="btn btn-primary" type="submit"
										value="Add to cart" />
								</form:form>

							</div>
							<div class="span2">
								<p>
									<a href="compare.html">Add to Compare</a>
								</p>
							</div>
						</div>

						<div class="span6">

							<p>
								<input name="star1" type="radio" class="star" /> <input
									name="star1" type="radio" class="star" /> <input name="star1"
									type="radio" class="star" /> <input name="star1" type="radio"
									class="star" /> <input name="star1" type="radio" class="star" />&nbsp;&nbsp;

								<a href="#">0 reviews</a> | <a href="#">Write a review</a>
							</p>
						</div>


					</div>


				</div>
				<hr>
				<div class="row">
					<div class="span9">
						<div class="tabbable">
							<ul class="nav nav-tabs">
								<li class="active"><a href="#1" data-toggle="tab">Description</a></li>
								<li><a href="#2" data-toggle="tab">Reviews</a></li>
								<li><a href="#3" data-toggle="tab">Related products</a></li>
							</ul>
							<div class="tab-content">
								<div class="tab-pane active" id="1">
									<p>${product.overview}</p>
								</div>
								<div class="tab-pane" id="2">
									<p>There are no reviews for this product.</p>
								</div>
								<div class="tab-pane" id="3">
									<ul class="thumbnails related_products">

										<li class="span2">
											<div class="thumbnail">
												<a href="product.html"><img alt=""
													src="http://placehold.it/220x180" /></a>
												<div class="caption">
													<h5>
														<a href="product.html"> iPod Touch </a>
													</h5>
													Price: &#36;50.00<br /> <br />
												</div>
											</div>
										</li>

										<li class="span2">
											<div class="thumbnail">
												<a href="product.html"><img alt=""
													src="http://placehold.it/220x180" /></a>
												<div class="caption">
													<h5>
														<a href="product.html"> iPod Touch </a>
													</h5>
													Price: &#36;50.00<br /> <br />
												</div>
											</div>
										</li>

										<li class="span2">
											<div class="thumbnail">
												<a href="product.html"><img alt=""
													src="http://placehold.it/220x180" /></a>
												<div class="caption">
													<h5>
														<a href="product.html"> iPod Touch </a>
													</h5>
													Price: &#36;50.00<br /> <br />
												</div>
											</div>
										</li>

										<li class="span2">
											<div class="thumbnail">
												<a href="product.html"><img alt=""
													src="http://placehold.it/220x180" /></a>
												<div class="caption">
													<h5>
														<a href="product.html"> iPod Touch </a>
													</h5>
													Price: &#36;50.00<br /> <br />
												</div>
											</div>
										</li>


									</ul>
								</div>
							</div>
						</div>

					</div>
				</div>



			</div>
		</div>
		<%@ include file="footer.jsp"%>
	</div>
</body>
</html>